---
title: Element de meniu
image: /images/user-guide/kanban-views/kanban.png
---

<Frame>
  <img src="/images/user-guide/kanban-views/kanban.png" alt="Header" />
</Frame>

Un element de meniu versatil, conceput pentru a fi utilizat într-un meniu sau listă de navigare.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItem } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  const handleButtonClick = (event) => {
    console.log("Icon button clicked!", event);
  };

  return (
    <MenuItem
      LeftIcon={IconBell}
      accent="default"
      text="Menu item text"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={true}
      testId="menu-item-1"
      onClick={handleMenuItemClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Proprietăți   | Tip              | Descriere                                                                                                                                     |
| ------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| IconaStânga   | ComponentaIcoana | O pictogramă opțională la stânga afișată înaintea textului din elementul de meniu                                                             |
| accent        | șir              | Specifică culoarea accentului pentru elementul de meniu. Opțiuni includ: `default`, `danger` și `placeholder` |
| text          | șir              | Conținutul text al elementului de meniu                                                                                                       |
| iconButtons   | array            | Un șir de obiecte care reprezintă butoane icon suplimentare asociate cu elementul de meniu                                                    |
| isTooltipOpen | boolean          | Controlează vizibilitatea tooltip-ului asociat cu elementul de meniu                                                                          |
| idTest        | șir              | Atributul data-testid pentru scopuri de testare                                                                                               |
| laClick       | funcție          | Funcție de callback declanșată când se face clic pe elementul de meniu                                                                        |
| numeClasa     | șir              | Nume opțional pentru stilizare suplimentară                                                                                                   |

</Tab>
</Tabs>

## Variante

Diferitele variante ale componentei elementului de meniu includ următoarele:

### Comandă

Un element de meniu de tip comandă într-un meniu pentru a indica scurtăturile de la tastatură.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemCommand } from "twenty-ui/display";

export const MyComponent = () => {
  const handleCommandClick = () => {
    console.log("Command clicked!");
  };

  return (
    <MenuItemCommand
      LeftIcon={IconBell}
      text="First Option"
      firstHotKey="⌘"
      secondHotKey="1"
      isSelected={true}
      onClick={handleCommandClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Proprietăți  | Tip              | Descriere                                                                         |
| ------------ | ---------------- | --------------------------------------------------------------------------------- |
| IconaStânga  | ComponentaIcoana | O pictogramă opțională la stânga afișată înaintea textului din elementul de meniu |
| text         | șir              | Conținutul text al elementului de meniu                                           |
| firstHotKey  | șir              | Prima scurtătură de tastatură asociată cu comanda                                 |
| secondHotKey | șir              | A doua scurtătură de tastatură asociată cu comanda                                |
| isSelected   | boolean          | Indică dacă elementul de meniu este selectat sau evidențiat                       |
| laClick      | funcție          | Funcție de callback declanșată când se face clic pe elementul de meniu            |
| numeClasa    | șir              | Nume opțional pentru stilizare suplimentară                                       |

</Tab>
</Tabs>

### Draggable

Un element de meniu drag realizat pentru a fi utilizat într-un meniu sau listă unde elementele pot fi trase, iar acțiuni suplimentare pot fi efectuate prin butoanele de pictograme.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItemDraggable } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  return (
    <MenuItemDraggable
      LeftIcon={IconBell}
      accent="default"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={false}
      onClick={handleMenuItemClick}
      text="Menu item draggable"
      isDragDisabled={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Proprietăți    | Tip              | Descriere                                                                                                |
| -------------- | ---------------- | -------------------------------------------------------------------------------------------------------- |
| IconaStânga    | ComponentaIcoana | O pictogramă opțională la stânga afișată înaintea textului din elementul de meniu                        |
| accent         | șir              | Culoarea accentului elementului de meniu. Poate fi `default`, `placeholder`, și `danger` |
| iconButtons    | array            | Un șir de obiecte care reprezintă butoane icon suplimentare asociate cu elementul de meniu               |
| isTooltipOpen  | boolean          | Controlează vizibilitatea tooltip-ului asociat cu elementul de meniu                                     |
| laClick        | funcție          | Funcția de callback care se declanșează la clic pe link                                                  |
| text           | șir              | Conținutul text al elementului de meniu                                                                  |
| isDragDisabled | boolean          | Indică dacă funcția de drag este dezactivată                                                             |
| numeClasa      | șir              | Nume opțional pentru stilizare suplimentară                                                              |

</Tab>
</Tabs>

### Multi Select

Oferă o modalitate de a implementa funcționalitatea multi-select cu un checkbox asociat.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemMultiSelect } from "twenty-ui/display";

export const MyComponent = () => {

  return (
    <MenuItemMultiSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Proprietăți    | Tip              | Descriere                                                                         |
| -------------- | ---------------- | --------------------------------------------------------------------------------- |
| IconaStânga    | ComponentaIcoana | O pictogramă opțională la stânga afișată înaintea textului din elementul de meniu |
| text           | șir              | Conținutul text al elementului de meniu                                           |
| selectat       | boolean          | Indică dacă elementul de meniu este selectat (bifat)           |
| onSelectChange | funcție          | Funcție de callback declanșată când starea checkbox-ului se schimbă               |
| numeClasa      | șir              | Nume opțional pentru stilizare suplimentară                                       |

</Tab>
</Tabs>

### Multi Select Avatar

Un element de meniu multi-select cu un avatar, un checkbox pentru selecție și conținut textual.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemMultiSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  return (
    <MenuItemMultiSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Proprietăți    | Tip         | Descriere                                                                                   |
| -------------- | ----------- | ------------------------------------------------------------------------------------------- |
| avatar         | `ReactNode` | Avatarul sau pictograma care urmează să fie afișată pe partea stângă a elementului de meniu |
| text           | șir         | Conținutul text al elementului de meniu                                                     |
| selectat       | boolean     | Indică dacă elementul de meniu este selectat (bifat)                     |
| onSelectChange | funcție     | Funcție de callback declanșată când starea checkbox-ului se schimbă                         |
| numeClasa      | șir         | Nume opțional pentru stilizare suplimentară                                                 |

</Tab>
</Tabs>

### Navigate

Un element de meniu care include o pictogramă opțională în stânga, conținut text și o pictogramă de săgeată la dreapta.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemNavigate } from "twenty-ui/display";

export const MyComponent = () => {
  const handleNavigation = () => {
    console.log("Navigate to another page");
  };

  return (
    <MenuItemNavigate
      LeftIcon={IconBell}
      text="First Option"
      onClick={handleNavigation}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Proprietăți | Tip              | Descriere                                                                                     |
| ----------- | ---------------- | --------------------------------------------------------------------------------------------- |
| IconaStânga | ComponentaIcoana | O pictogramă opțională la stânga afișată înaintea textului din elementul de meniu             |
| text        | șir              | Conținutul text al elementului de meniu                                                       |
| laClick     | funcție          | Funcția de apel invers care urmează să fie declanșată când se face clic pe elementul de meniu |
| numeClasa   | șir              | Nume opțional pentru stilizare suplimentară                                                   |

</Tab>
</Tabs>

### Selectați

Un element de meniu selectabil, care include opțional părți la stânga (pictogramă și text) și un indicator (pictograma de bifare) pentru starea selectată.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemSelect } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Proprietăți | Tip              | Descriere                                                                                     |
| ----------- | ---------------- | --------------------------------------------------------------------------------------------- |
| IconaStânga | ComponentaIcoana | O pictogramă opțională la stânga afișată înaintea textului din elementul de meniu             |
| text        | șir              | Conținutul text al elementului de meniu                                                       |
| selectat    | boolean          | Indică dacă elementul de meniu este selectat (bifat)                       |
| dezactivat  | boolean          | Indică dacă elementul de meniu este dezactivat                                                |
| hovered     | boolean          | Indică dacă elementul de meniu este în prezent trecut cu mouse-ul                             |
| laClick     | funcție          | Funcția de apel invers care urmează să fie declanșată când se face clic pe elementul de meniu |
| numeClasa   | șir              | Nume opțional pentru stilizare suplimentară                                                   |

</Tab>
</Tabs>

### Selectați Avatar

Un element de meniu selectabil cu un avatar, care include opțional părți la stânga (avatar și text) și un indicator (pictograma de bifare) pentru starea selectată.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      testId="menu-item-test"
      onClick={handleSelection}
      className
    />
  );
};

```

</Tab>
<Tab title="Props">

| Proprietăți | Tip         | Descriere                                                                                     |
| ----------- | ----------- | --------------------------------------------------------------------------------------------- |
| avatar      | `ReactNode` | Avatarul sau pictograma care urmează să fie afișată pe partea stângă a elementului de meniu   |
| text        | șir         | Conținutul text al elementului de meniu                                                       |
| selectat    | boolean     | Indică dacă elementul de meniu este selectat (bifat)                       |
| dezactivat  | boolean     | Indică dacă elementul de meniu este dezactivat                                                |
| hovered     | boolean     | Indică dacă elementul de meniu este în prezent trecut cu mouse-ul                             |
| idTest      | șir         | Atributul data-testid pentru scopuri de testare                                               |
| laClick     | funcție     | Funcția de apel invers care urmează să fie declanșată când se face clic pe elementul de meniu |
| numeClasa   | șir         | Nume opțional pentru stilizare suplimentară                                                   |

</Tab>
</Tabs>

### Selectați Culoarea

Un element de meniu selectabil cu un eșantion de culoare pentru situațiile în care doriți ca utilizatorii să aleagă o culoare dintr-un meniu.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectColor } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectColor
      color="green"
      selected={true}
      disabled={false}
      hovered={true}
      variant="default"
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Proprietăți | Tip     | Descriere                                                                                                                                                                                                                       |
| ----------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| culoare     | șir     | Culoarea temei care urmează să fie afișată ca eșantion în elementul de meniu. Opțiunile includ: `verde`, `turcoaz`, `cer`, `albastru`, `violet`, `roz`, `roșu`, `portocaliu`, `galben` și `gri` |
| selectat    | boolean | Indică dacă elementul de meniu este selectat (bifat)                                                                                                                                                         |
| dezactivat  | boolean | Indică dacă elementul de meniu este dezactivat                                                                                                                                                                                  |
| hovered     | boolean | Indică dacă elementul de meniu este în prezent trecut cu mouse-ul                                                                                                                                                               |
| variantă    | șir     | Varianta eșantionului de culoare. Poate fi fie `default`, fie `pipeline`                                                                                                                                        |
| laClick     | funcție | Funcția de apel invers care urmează să fie declanșată când se face clic pe elementul de meniu                                                                                                                                   |
| numeClasa   | șir     | Nume opțional pentru stilizare suplimentară                                                                                                                                                                                     |

</Tab>
</Tabs>

### Comutare

Un element de meniu cu un comutator asociat pentru a permite utilizatorilor să activeze sau să dezactiveze o caracteristică specifică

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from '@tabler/icons-react';

import { MenuItemToggle } from 'twenty-ui/display';

export const MyComponent = () => {

  return (
    <MenuItemToggle
      LeftIcon={IconBell}
      text="First Option"
      toggled={true}
      toggleSize="small"
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Proprietăți    | Tip              | Descriere                                                                         |
| -------------- | ---------------- | --------------------------------------------------------------------------------- |
| IconaStânga    | ComponentaIcoana | O pictogramă opțională la stânga afișată înaintea textului din elementul de meniu |
| text           | șir              | Conținutul text al elementului de meniu                                           |
| comutat        | boolean          | Indică dacă comutatorul este în starea „activat” sau „dezactivat”                 |
| onToggleChange | funcție          | Callback function triggered when the toggle switch state changes                  |
| toggleSize     | șir              | Dimensiunea comutatorului. It can be either \                    |
| numeClasa      | șir              | Nume opțional pentru stilizare suplimentară                                       |

</Tab>
</Tabs>
